<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="onAdd">添加</el-button>
    </div>
    <div class="item" v-for="item in mainState.rtspArr" :key="item.id">
      <div class="name">{{ item.name }}</div>
      <el-dropdown>
        <span>
          <el-icon><ArrowDownBold /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="mainState.onState(item.id)"
              >启动</el-dropdown-item
            >
            <el-dropdown-item @click="mainState.onStop(item.id)"
              >停止</el-dropdown-item
            >
            <!-- <el-dropdown-item @click="onEdit(item)">修改</el-dropdown-item>
            <el-dropdown-item @click="mainState.onDelete(item.id)">删除</el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <Alert
    :title="myAlert.title"
    :type="myAlert.type"
    :show="myAlert.show"
    :is-button="myAlert.isButton"
    :form="myAlert.form"
    @onSuccess="onSuccess"
    @onCancel="onCancel"
  />
</template>

<script setup lang="ts">
import { mainStore,RtspArr } from "@/store/main";
import { reactive } from "vue";
import Alert from "@/components/myComponents/Alert/Alert.vue";
const mainState = mainStore();
const initRecord = {
  name: "",
  rtsp: "",
};
const columns: columnsType[] = [
  {
    label: "名称",
    name: "name",
    formItem: {
      type: "text",
    },
  },
  {
    label: "RTSP",
    name: "rtsp",
    formItem: {
      type: "text",
    },
  },
];

const myAlert: AlertPropsType = reactive({
  title: "添加",
  type: "form",
  show: false,
  isButton: false,
  form: {
    data: initRecord,
    columns: columns,
  },
});

const onAdd = ()=>{
    myAlert.title = '添加'
    myAlert.show = true
    myAlert.form!.data = initRecord
}

const onEdit = (info:RtspArr)=>{
    myAlert.title='编辑'
    myAlert.show = true
    myAlert.form!.data = JSON.parse(JSON.stringify(info))
}

const onSuccess = (isOk: boolean) => {
  if (!isOk) return;
  if (!myAlert.form?.data.id) {
    mainState.onAdd(myAlert.form?.data);
  }else{
    mainState.onEdit(myAlert.form?.data)
  }
  myAlert.show = false;
};

const onCancel = () => {
  myAlert.show = false;
};
</script>

<style scoped lang="less">
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.item {
  width: 100%;
  height: 50px;
  background-color: #cce2f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  //   cursor: pointer;
  margin-bottom: 10px;

  .el-dropdown {
    cursor: pointer;
  }

  .name {
    cursor: default;
  }
}
</style>
